<template>

  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>客户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--用于添加卡片（整体展示）-->
    <el-card class="box-card">
      <!--模糊查询表单-->
      <el-form :model="customer" class="demo-form-inline" >
        <el-row :gutter="20">
          <el-form-item>
            <el-col :span="4">
              <!--模糊查询输入框 v-model是绑定的数据-->
              <el-input placeholder="名称" v-model="customer.name"></el-input>
            </el-col>
            <!--搜索+添加的按钮 type可以修改按钮的颜色-->
            <el-button plain type="info" @click="sel">搜索</el-button>
            <el-button  type="primary" @click="addCustomer">添加客户</el-button>
            <el-button  type="primary" @click="">导入</el-button>
            <el-button  type="primary" @click="">导出</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <!--列表展示 :data是数据绑定 从后台获取的返回数据进行赋值-->
      <el-table
        :data="customerList"
        style="width: 100%">
        <!--一列的字段 label(需要修改)是上面的行名称 prop（需要修改）是绑定的后台数据-->
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="code"
          label="编号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="invoiceType"
          label="发票类型"
          width="180">
        </el-table-column>
        <el-table-column
          prop="invoiceTitle"
          label="发票抬头"
          width="180">
        </el-table-column>
        <el-table-column
          prop="invoiceNum"
          label="税号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="taxRate"
          label="税率"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="公司地址"
          width="180">
        </el-table-column>
        <el-table-column
          prop="industry"
          label="所属行业"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <!--点击按钮 需要绑定@click的时间 例如 @click="add"-->
          <template slot-scope="scope">
          <el-button type="primary" @click="UpdateCustomer(scope.row.id)">编辑</el-button>
          <el-button type="primary" @click="isDel(scope.row.id)">删除</el-button>
          <el-button @click="toDetails(scope.row.id)" size="small" type="text">明细
          </el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>
    <!--分页的组件 需要将total,pagenum,pagesize重新定义并且赋值完成分页-->
    <!--用于分页的插件-->
    <el-pagination
      :current-page="pagenum"
      :page-size="pagesize"
      :page-sizes="[5, 10, 20, 40]"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
    export default {
        name: "CustomerList",
        data(){
          return{
            customerList:[],
            customer:{},
            CustomerMx:{},
            /*初始化分页数据*/
            pagenum:0,
            pagesize:5,
            total:0
          }
        },
      methods:{
          sel:function () {
            // debugger;
            this.$http.post("/customer/list/"+this.pagenum+"/"+this.pagesize,this.customer).then((res)=>{
              /*请求数据进行赋值渲染*/
              this.customerList = res.data.result.list;
              this.total = res.data.result.total;
            })
          },
        handleSizeChange: function (val) {
          /*将数据重新赋值，并且向后端发送请求*/
          this.pagesize = val;
          this.sel();
        },
        handleCurrentChange: function (val) {
          /*将数据重新赋值，并且向后端发送请求*/
          this.pagenum = val;
          this.sel();
        },
        addCustomer:function () {
         this.$router.push("/add")
        },
        toDetails:function (id) {
          this.$router.push({path:'/details',query:{id:id}});
        },
        UpdateCustomer:function (id) {
          this.$router.push({path:'/add',query:{id:id}});
        },
        isDel:function (id) {
          this.$http.delete("/customer/del/"+id).then((res)=>{
            this.sel();
          })
        }
      },
      mounted () {
        this.sel();
      }
    }
</script>

<style scoped>

</style>
